<template>
	<div class="home">
		<navigationTar />
		<div class="shs_body">
			<el-container>
				<el-header />
				<el-container>
					<el-main>
						<template v-if="artcle_title">
							<h1>
								搜索==>‘{{ artcle_title }}’
								<i class="el-icon-refresh" style="cursor: pointer;" title="回到首页"
									@click="elIconRefresh"></i>
							</h1>
						</template>
						<!-- 文章列表 -->
						<article-list :artcle_title.sync="artcle_title" />
					</el-main>

					<el-aside class="sticky aside_right">
						<h4>搜索</h4>
						<div style="margin-top: 15px">
							<el-input placeholder="请输入内容" @input="querySearchAsync" v-model="input_select"
								class="input-with-select">
								<el-button slot="append" @click="querySearchAsync" icon="el-icon-search"></el-button>
							</el-input>
						</div>

						<div class="search_box">
							<el-button v-if="searchFlag" style="width: 100%" :loading="true"></el-button>
							<div class="box-card" v-show="searchFlag2">
								<ul>
									<li class="search_return" v-for="item in restaurants" :key="item.articleID">
										<div class="search_return_content" @click="click_article(item)">
											<el-image style="width: 100px; height: 100px"
												class="search_return_left wz_el_image" :src="item.cover" fit="fill" />
											<div class="search_return_right">
												<p :title="item.title">{{ item.title }}</p>
												<p>{{ item.createAt.split('T')[0] }}</p>
											</div>
										</div>
									</li>
								</ul>
								<div class="ckgd" style="padding-left: 10px;cursor: pointer;"
									@click="seeMore(input_select)">
									查看更多
								</div>
							</div>
						</div>
					</el-aside>
				</el-container>

				<el-footer>
					版权所有 © 社会数信息技术 -
					技术服务支持：社会数信息科技有限公司 － 闽ICP备xxxxxxxx号-1备案号
				</el-footer>

				<el-backtop visibility-height="400" style="right: 80px; bottom: 150px">
					<i class="el-icon-caret-top"></i>
				</el-backtop>
			</el-container>
		</div>
	</div>
</template>

<script>
	import {
		Article_isok
	} from '@/request/api'
	import {
		getArticle_list_user_top
	} from '@/request/api'

	export default {
		name: 'HomeView',
		data() {
			return {
				input_select: null,
				list: [],
				restaurants: [],
				searchFlag: false,
				searchFlag2: false,
				artcle_title: null,
				timeout: null,
				searchCache: {}
			}
		},
		components: {
			navigationTar: () => import('@/components/navigationTar.vue'),
			articleList: () => import('@/components/articlelist.vue')
		},
		methods: {
			click_article(row) {
				this.$router.push({
					path: '/articleHome',
					query: {
						ID: row.articleID
					}
				})
			},
			querySearchAsync() {
				const _this = this
				if (!_this.input_select) {
					_this.searchFlag = _this.searchFlag2 = false
					return
				}
				if (_this.searchCache[_this.input_select]) {
					_this.restaurants = _this.searchCache[_this.input_select]
					_this.searchFlag2 = true
					return
				}
				_this.searchFlag = true
				_this.searchFlag2 = false
				clearTimeout(_this.timeout)
				_this.timeout = setTimeout(() => {
					Article_isok({
							title: _this.input_select
						})
						.then(data => {
							_this.searchFlag = false
							const list = data?.data?.data?.list || []
							if (!list.length) {
								_this.searchFlag2 = false
								_this.$notify({
									message: '暂无数据',
									duration: 1000
								})
							} else {
								_this.searchFlag2 = true
								_this.restaurants = list
								_this.searchCache[_this.input_select] = list
							}
						})
						.catch(err => {
							_this.searchFlag = _this.searchFlag2 = false
							_this.$notify({
								message: '搜索失败，请稍后再试',
								duration: 1000
							})
							console.error(err)
						})
				}, 300)
			},
			seeMore(val) {
				this.artcle_title = val
			},
			elIconRefresh() {
				this.artcle_title = null
			}
		},
		mounted() {
			this.artcle_title = null
			getArticle_list_user_top().then(res => {
				console.log('res_top5', res)
			})
		}
	}
</script>

<style scoped>
	ul {
		list-style: none;
	}

	.shs_body {
		width: 86%;
		min-width: 1000px;
		margin: 0 auto;
		position: relative;
	}

	.el-header {
		position: relative;
		color: #333;
		text-align: center;
		line-height: 4rem;
	}

	.el-footer {
		position: relative;
		background-color: #cffafc;
		color: #333;
		text-align: center;
		line-height: 4rem;
		font-size: 0.85rem;
	}

	.el-aside {
		position: relative;
		color: #333;
		min-width: 25rem;
		padding-left: 4rem;
		height: 30rem;
	}

	.el-main {
		background-color: #e0ffff;
		color: #333;
		text-align: center;
	}

	.sticky {
		position: sticky;
		top: 51px;
	}

	.search_box {
		position: absolute;
	}

	.ckgd:hover {
		color: rgb(0, 255, 55);
	}

	.box-card {
		width: 100%;
		background: #fff;
	}

	.search_return {
		font-size: 14px;
		display: flex;
		padding: 5px;
	}

	.search_return_content:hover {
		color: #2d6cb5;
		cursor: pointer;
	}

	.search_return_left {
		width: 100px;
		height: 100px;
	}

	.search_return_right {
		display: inline-block;
		padding: 0 10px;
		line-height: 50px;
		vertical-align: middle;
		max-width: 226px;
	}

	.search_return_right p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>